<template>
    <div class="slidebar">
        <div class="childh">
            <a href="#/home/energy" @click="energy(1)">
                <div :class="['hexagon2','hexagon2active',{'hexagon2add':this.$store.state.threeD.energycla ==1}]">
                    <span class="iconfont icon-nenghaoreli"></span>
                    <div class="font-title font-title1">能耗热力图</div>
                </div>
            </a>
            <a href="#/home/property" @click="property(2)" style="margin-top:11px">
                <div :class="['hexagon2','hexagon2active', {'hexagon2add':this.$store.state.threeD.energycla ==2}]">
                    <span class="iconfont icon-zichanjiazhimidu"></span>
                    <div class="font-title font-title2">
                        <div>资产价值</div>
                        <div>密度</div>
                    </div>
                </div>
            </a>
            <a href="#/home/operation" @click="operation(3)" style="margin-top:11px">
                <div :class="['hexagon2', 'hexagon2active',{'hexagon2add':this.$store.state.threeD.energycla ==3}]">
                    <span class="iconfont icon-chengben"></span>
                    <div class="font-title font-title2">
                        <div>运维成本</div>
                        <div>热力图</div>
                    </div>
                </div>
             </a>
             <a href="#/home/workorder" @click="workorder(4)" style="margin-top:11px">
                <div :class="['hexagon2','hexagon2active', {'hexagon2add':this.$store.state.threeD.energycla ==4}]">
                    <span class="iconfont icon-gongdanmidu"></span>
                    <div class="font-title font-title1">工单密度</div>
                </div>
             </a>
             <a href="#/home/Abnormalvideo" @click="Abnormalvideo(5)" style="margin-top:11px">
                <div :class="['hexagon2','hexagon2active', {'hexagon2add':this.$store.state.threeD.energycla ==5}]">
                    <span class="iconfont icon-yichangshipin"></span>
                    <div class="font-title font-title1">异常视频</div>
                </div>
            </a>
        </div>
    </div>
</template>

<script>
export default {
  name: "slidebar",
  data() {
    return {};
  },
  methods: {
    energy(num) {
      WebMouseClickEvent("eventClick_001");
      this.$store.state.threeD.energycla = num;
    },
    property(num) {
      WebMouseClickEvent("eventClick_002");
      this.$store.state.threeD.energycla = num;
    },
    operation(num) {
      WebMouseClickEvent("eventClick_003");
      this.$store.state.threeD.energycla = num;
    },
    workorder(num) {
      WebMouseClickEvent("eventClick_004");
      this.$store.state.threeD.energycla = num;
    },
    Abnormalvideo(num) {
      WebMouseClickEvent("eventClick_005");
      this.$store.state.threeD.energycla = num;
    }
  },
  created() {},
};
</script>

<style lang="scss" scoped >
.slidebar {
  height: 100%;
  width: 100%;
  position: relative;
  .childh {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    .font-title {
      text-align: center;
      color: white;
      font-size: 0.09rem;
      position: absolute;
      top: 46.5%;
      width: 100%;
      a {
        width: 90px;
        height: 18%;
      }
    }
    .font-title1 {
      top: 46.5%;
    }
    .font-title2 {
      top: 42.5%;
    }
    .hexagon2 {
      height: 18%;
      background-color: firebrick;
      position: relative;
      .iconfont {
        text-align: center;
        color: white;
        font-size: 28px;
        position: absolute;
        left: 33%;
        top: 15%;
        animation: myfirst 2s infinite alternate;
      }
    }
    .hexagon2active {
      background: url("../../../assets/img/originl.png") no-repeat;
      background-size: 100%;
      width: 90px;
    }
    .hexagon2:hover {
      background: url("../../../assets/img/hover.png") no-repeat;
      background-size: 100%;
      width: 100px;
    }
    .hexagon2add {
      background: url("../../../assets/img/hover.png") no-repeat;
      background-size: 100%;
      width: 100px;
    }
  }
}
@keyframes myfirst {
  50% {
    top: 8px;
  }
}
</style>
